<template>
  <div class="login_content">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <!-- 右侧表单部分 -->
      <el-col :span="12" :xs="24" class="right">
        <div class="right-tip">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
        </div>
        <div class="right-form">
          <el-form :model="loginForm" :rules="rules" ref="loginForms">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="loginForm.username" :prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="loginForm.password" :prefix-icon="Lock" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="isLoading" class="login_btn" @click="login_btn">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElRow, ElCol, ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import { User, Lock } from '@element-plus/icons-vue';
import { reactive, ref } from "vue";
//引入elment-plus
import { ElMessage, ElNotification } from 'element-plus';
//@ts-ignore
import useUserStore from "@/store/user.ts";  //引入仓库
const userStore = useUserStore();
//引入路由器
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

let loginForm = reactive({
  username:"admin",
  password:"atguigu123"
})
let isLoading = ref(false);

//登录表单校验规则
const loginForms = ref();  //表单组件实例
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '' || value.length<2) {
    callback(new Error('请输入合法的用户名'))
  } else {
    callback();
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 4){
    callback(new Error('密码长度不能少于四位'));
  } else {
    callback();
  }
}
const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }]
})


//登录按钮
const login_btn = async function(){
  try {
    await loginForms.value.validate();
  } catch (error) {
    return ElMessage({type:"error",message:"请输入合法的账号和密码"});
  }
  isLoading.value = true;
  //调用仓库登录函数
  try {
    await userStore.userLogin(loginForm);
    //进行路由跳转
    let redirectpath:any = route.query.redirect;
    if(redirectpath != undefined){
      router.push({path:redirectpath});
    }else{
      router.push('/');
    }
    ElMessage({type:'success',message:'登陆成功!'});
    isLoading.value = false;
    showTime();
  } catch (error) {
    ElMessage({type:'error',message:'账号或密码错误!'});
    isLoading.value = false;
  }
}
//展示通知信息时间处理
function showTime():void{
  let msg:string = '';
  let hours:number = new Date().getHours();
  let minutes:number = new Date().getMinutes();
  if(hours > 0 && (hours < 5 || (hours == 5 && minutes <= 30))){
    msg = "夜深了";
  }else if((hours > 5 || (hours == 5 && minutes > 30)) && hours < 12){
    msg = "上午好";
  }else if(hours >= 12 && (hours < 18 || (hours == 18 && minutes <= 30))){
    msg = "下午好";
  }else if((hours > 18 || (hours == 18 && minutes > 30)) && (hours < 23 || (hours == 23 && minutes <= 30))){
    msg = "晚上好";
  }else if(hours == 23 && minutes > 30){
    msg = "夜深了";
  }
  //消息推送
  ElNotification({title: `Hi,${msg}!`,message: '欢迎回来',type: 'success',duration:4500,showClose:true});
}

</script>

<style scoped lang="scss">
.login_content{
  width:100%;
  height:100vh;
  background: url('@/assets/images/background.jpg') no-repeat no-repeat;
  background-size: cover;

  .right{
    position: relative;
    top:30vh;
    right:10vh;
    background: url('@/assets/images/login_form.png') no-repeat no-repeat;
    background-size: cover;
    padding: 20px 30px;

    .right-tip{
      margin-left: 5vw;
      color:white;

      h1{font-size: 30px;}
      h2{font-size: 16px;margin:20px 0;}
    }
    .right-form{
      width: 30vw;
      margin: 0 auto;

      .login_btn{
        width: 100%;
      }
    }
  }
}

</style>